<template>
    <div style="padding: 24px 24px 0; width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <div style="font-size: 24px;">抢单中心</div>
            <el-input class="search cur search-list" style="width: 280px;border-radius: 20px;"
                placeholder="请输入学员姓名搜索" v-model="search.userName">
                <template slot="append">
                    <div @click="searchFun">搜索</div>
                </template>
            </el-input>
        </div>
        <div class="boxs" style="padding: 24px 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center" v-loading="loading">
            <div style="overflow-y: auto; min-height: 0; flex: 1;">
                <div style="display: flex; flex-wrap: wrap; gap: 20px;" v-if="listData.length">
                    <div class="box" style="width: 390px;" v-for="item in listData">
                        <div class="" style="font-size: 18px;">订单号：{{ item.code }}</div>
                        <div class="" style="font-size: 15px; margin-top: 10px; color: #626780">学员姓名：{{ item.fromUser.name }}</div>
                        <div class="" style="font-size: 15px; margin-top: 5px; color: #626780">手机号：{{ item.fromUser.mobile }}</div>
                        <div class="" style="font-size: 15px; margin-top: 5px; color: #626780;">支付时间：{{ item.paymentTime }}</div>
                        <div class="btns" style="display: flex; align-items: center; justify-content: center;">
                            <div class="btn cur" @click="readFn(item)">立即抢单</div>
                        </div>
                    </div>
                </div>
            </div>
            <empty type="1" text="暂无可抢订单" v-if="!listData.length"></empty>
        </div>

        <!-- 分页 -->
        <div style="display: flex;align-items: center;justify-content: center; padding: 20px 0;" v-if="listData.length">
            <div class="pagination_cont">
                <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                @current-change="changePage"></pagination>
            </div>
        </div>

            <bear_dialogVue
                ref="bearDialog"
                :width="'360px'"
                :height="'260px'"
                :isUserFooter="false"
                >
                <template #topControl>
                    <div class="blod" style="font-size: 2.6rem">个人信息</div>
                </template>
                <div style="font-size: 18px; margin-top: 15px; text-align: center">是否确认抢单，抢单后需要与学员沟通进行预约排课并安排上课</div>
                <div class="btn cur" style="margin: 30px auto 0;" @click="applyFn" v-loading="loading">确认抢单</div>
            </bear_dialogVue>

    </div>
</template>

<script>
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import { transactionList, teacherApply } from '@/api/transaction.js'
export default {
    components:{
        bear_dialogVue
    },
    data() {
        return {
            search: {
				userName: ''
			},
            loading: false,
            applyLoading: false,
			listData: [],
			currentPage: 1, // 当前页
			pageSize: 15, // 每页条数
			total: 0, // 总条数
            chooseTransaction: null
        }
    },
    mounted() {
        this.getList()
    },
    methods:{
        async getList() {
			this.loading = true
			this.search.page = this.currentPage
			await transactionList(this.search).then(res => {
				this.loading = false
				if (res.error === 0) {
					this.listData = res.data.list
					this.total = res.data.total
					this.pageSize = res.data.perPage
				}
			})
		},
        searchFun() {
            this.currentPage = 1
            this.getList()
        },
        changePage(page) {
			this.currentPage = page
			this.getList()
		},
        readFn(row){
            this.chooseTransaction = row
            this.$refs.bearDialog.openDialog()
        },
        applyFn() {
            this.applyLoading = true
            const param = {
                transactionCode: this.chooseTransaction.code
            }
            teacherApply(param).then(res => {
                this.applyLoading = false
                if (res.error == 0) {
                    this.chooseTransaction = null
                    this.$message.success('抢单成功')
                    this.$refs.bearDialog.closeDialog();
                    this.getList()
                } else {
                    this.$message.error(res.message)
                }
			}).finally(() => {
                this.applyLoading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.box:after{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
    opacity: 0;
    transition: 0.3s;
}
.box{position: relative; padding: 20px 20px; border-radius: 10px; overflow: hidden;background-color: #F7F8FA;}
.box:hover .btns,.box:hover:after{opacity: 1;transition: 0.3s;}
.btns{position: absolute; z-index: 2;left: 0; width: 100%;transition: 0.3s;
    height: 100%; opacity: 0;
    top: 0;}
.btn{
    width: 140px;
    height: 52px;
    border-radius: 10px;
    background-color: #019E69;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.search {

    // border: 1px solid $background-theme;
    // border-radius: 10px 0px 0px 10px;
    ::v-deep .el-input__inner {
        border-radius: 1rem 0px 0px 1rem !important;

    }
}

::v-deep .el-input-group__append {
	border-radius: 0px 1rem 1rem 0px;
	color: #fff;
	background: $background-theme;
	border: 1px solid $background-theme;

}
</style>